import React, { Component } from 'react';
import './Allgood.scss'
import { Toast } from 'antd-mobile'
import { good_list, good_search } from '../../utils/api'
import { SearchOutline } from 'antd-mobile-icons'
import Optionlist from '../../component/Optionlist';
import { Skeleton } from 'antd-mobile'
class Allgood extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0,
            tablist: ['综合', "销量", "新品", "价格", '筛选'],
            goodlist: [],
            goodId: null,
            searchText: '',
            showElem: 'none',
            isRead: false
        }
    }
    handleClick(index) {
        this.setState({ currentIndex: index })
    }
    handleChange(e) {
        this.setState({ searchText: e.target.value }, () => {
            console.log('searchText', this.state.searchText)
        })
    }
    handleSearch() {
        if (this.state.searchText != '') {
            good_search({ searchkey: this.state.searchText }).then((res) => {
                console.log(res.data.list)
                this.setState({ goodlist: res.data.list })
            })
        } else {
            Toast.show({
                content: '请先输入商品名称',
                afterClose: () => {
                    console.log('after')
                },
            })
        }

    }
    componentDidMount() {
        if (this.props.location.state.Text) {
            console.log('text参数', this.props.location.state.Text)
            good_search({ searchkey: this.props.location.state.Text }).then((res) => {
                console.log(res.data.list)
                this.setState({ goodlist: res.data.list })
            })
        } else {
            console.log('text参数', this.props.location.state.goodid)
            good_list({ id: this.props.location.state.goodid }).then((res) => {
                console.log('请求结果', res.data)
                if (res.data.code == 400) {
                    this.setState({ goodlist: [] })
                } else {
                    this.setState({ goodlist: res.data.list })
                }

            })
        }
    }
    render() {
        console.log('this.state.goodlist',
            this.state.goodlist
        )
        return (
            <div>
                <div className="title">
                    <h3>全部商品</h3>
                    <div className="inputhead">
                        <div className="inputbox">
                            <SearchOutline fontSize={18} />
                            {/* input搜索框 */}
                            <input type="text" placeholder='搜索店铺内商品' value={this.state.searchText} onChange={(e) => { this.handleChange(e) }} />
                            {/* input搜索框 */}
                        </div>
                        <div className="quxiao" onClick={() => { this.handleSearch() }}>搜索</div>
                    </div>

                    <div className="tab">
                        {
                            this.state.tablist.map((element, index) => {
                                return (
                                    <div className={`tabbox ${this.state.currentIndex == index ? "active" : ''}`} key={index} onClick={() => { this.handleClick(index) }}>{element}</div>
                                )
                            })
                        }

                    </div>
                </div>
                {/* this.state.goodlist.length == 0 ? (<div className='empty_shop'>没有找到相关商品，为您推荐以下商品：</div>) : */}
                <div className="goodlist">
                    {
                        //请求返回商品列表前, 显示骨架屏
                        this.state.goodlist.length == 0 ?
                            <>
                                <Skeleton.Title animated />
                                <Skeleton.Paragraph lineCount={5} animated />
                            </> :
                            this.state.goodlist && this.state.goodlist.map((element, index) => {
                                return (
                                    <div className="list" key={index} onClick={() => { this.props.history.push({ pathname: '/detail', state: { goodid: element.id } }) }}>
                                        <img src={element.pic} alt="" />
                                        <div className="text">{element.name}</div>
                                        <div className="price">活动价￥{element.salesPrice.value}</div>
                                    </div>
                                )
                            })
                    }
                </div>

                <div className="option">
                    {
                        this.state.goodlist.length == 0 ? (<Optionlist />) : null

                    }

                </div>
            </div>
        );
    }
}

export default Allgood;